<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>

</head>
<body>
<div id="app">
    书名:<input v-model="name">
    出版社:<input v-model="press">
    出版日期:<input v-model="date">
    <table style="width: 100%" border="1">
        <tr>
            <td>编号</td>
            <td>书名</td>
            <td>出版社</td>
            <td>出版日期</td>
            <td>作者</td>
            <td>库存</td>
            <td>图片</td>
        </tr>
        <tr v-for=" book in list">
            <th>{{book.id}}</th>
            <th>{{book.bookname}}</th>
            <th>{{book.bookpress}}</th>
            <th>{{book.pressdate}}</th>
            <th>{{book.bookauthor}}</th>
            <th>{{book.bookcount}}</th>
            <th><img :sec="book.bookimage" height="100px"></th>
        </tr>
    </table>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            list : [],
            name: "",
            press : "",
            ddate : "",
        },
        //但 vue 对象创建好之后，立即执行的代码
        created : function(){
          this.query();
        },
        methods : {
            query(){
                axios({
                    url : "../QueryBookServlet",
                    // 请求参数请使用 params
                    params : {
                        name : this.name,
                        press : this.press,
                        date : this.date,
                    }
                    // function(res) {}简写
                }).then( (res) => {
                    this.list = res.data;
                });
            }
        }
    });
</script>
</body>
</html>